<!-- 文件上传组件 -->
<template>
  <input type="file"
         multiple
         webkitdirectory
         mozdirectory
         odirectory
         hidden
  />
  <div class="blk-item accept-box"
       @dragenter="onDragEnter"
       @dragover="onDragOver"
       @drop="onDrop"
  >
    <div class="tip-box"><i class="uiw--cloud-upload"></i>将目录或多个文件拖拽到此区域，也可以点击此区域呼出文件选框</div>
    <div class="tip-box">支持的文件类型：{{ props.accepts.join('、') }}</div>
    <div class="tip-box" v-if="props.singleMaxSize">每个文件允许的最大尺寸：{{ props.singleMaxSize }}</div>
  </div>
  <div  class="blk-item">
    <!-- 文件信息统计区域 -->
    <el-tag type="info">文件数量：{{ fileCount }}</el-tag>
    <el-tag type="success">成功上传：{{ successCount }}</el-tag>
    <el-tag type="info">总大小：{{ totalFileSize }}</el-tag>
  </div>
  <div class="blk-item" style="height: 400px; border-bottom: 1px solid #CCCCCC">
    <table style="width: 100%;">
      <thead style="background-color: #F0F0F0; height: 3em;">
      <tr>
        <th>文件名</th>
        <th>类型</th>
        <th>大小</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
  <div  class="blk-item">
    <!-- 开始上传按钮 -->
    <button>开始上传</button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
  accepts: {
    type: Array<String>,
    default: ['任意文件类型'],
    required: true
  },

  singleMaxSize: {
    type: String,
    default: '无限制'
  }
});

// 文件数量
const fileCount = ref<number>(0);
// 成功上传数量
const successCount = ref<number>(0);
// 文件总大小
const totalFileSize = ref<string>('0 Byte');
// 监听文件拖入事件并阻止默认行为
const onDragEnter = (e: DragEvent) => {
  e.preventDefault();
}
// 监听文件拖入悬停事件并阻止默认行为，因为默认情况下div不允许任何东西拖入
const onDragOver = (e: DragEvent) => {
  e.preventDefault();
}
// 监听文件拖入释放事件并阻止默认行为
const onDrop = (e: DragEvent) => {
  e.preventDefault();
  const items = e.dataTransfer?.items;
  for (const item of items) {
    const entry = item.webkitGetAsEntry(); // 获取到文件（夹）句柄
    if (entry.isDirectory) {
      const reader = entry.createReader();
      reader.readEntries((entries) => {
        console.log(entries);
      })
    } else {
      entry.file(file => console.log(file));
    }
  }
}

</script>
<style lang="scss" scoped>
.blk-item {
  width: 100%;
  margin: 10px 0;
}

.accept-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px dashed #ccc;
  border-radius: 5px;
  height: 300px;
  cursor: pointer;
}

.tip-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: "Arial Rounded MT Bold";
}

.uiw--cloud-upload {
  display: inline-block;
  width: 2em;
  height: 2em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%232f88ff' fill-rule='evenodd' d='M11.5 3a4.5 4.5 0 0 1 4.492 4.77H16l-.001 1.227a4 4 0 0 1 3.996 3.799l.005.2a4 4 0 0 1-3.8 3.992l-.2.005h-.001L16 17h-5.001v-3.923h2.464L10 9.003l-3.454 4.075H9L8.999 17H4a4.01 4.01 0 0 1-4-4.005a4 4 0 0 1 3.198-3.918a3 3 0 0 1 4.313-3.664A4.5 4.5 0 0 1 11.5 3'/%3E%3C/svg%3E");
}

.mingcute--empty-box-line {
  display: inline-block;
  width: 4em;
  height: 4em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%232f88ff' d='M11.084 3.244a3 3 0 0 1 1.607-.063l.225.063L19.45 5.34c.19.063.361.181.486.346l.07.105l2.75 4.747a1 1 0 0 1-.44 1.407l-.12.047l-2.051.658v4.33a2 2 0 0 1-1.237 1.848l-.152.056l-5.84 1.872a3 3 0 0 1-1.607.063l-.225-.062l-5.84-1.873a2 2 0 0 1-1.382-1.743l-.007-.162V12.65l-2.051-.658a1 1 0 0 1-.617-1.338l.057-.116l2.75-4.747a1 1 0 0 1 .445-.406l.11-.045zM13 12.305v6.324l5.145-1.65v-3.687l-3.09.991a1 1 0 0 1-1.106-.353l-.064-.098zm-2 0l-.885 1.527a1 1 0 0 1-1.17.451l-3.09-.991v3.687L11 18.63zM5.32 7.49l-1.723 2.977l5.191 1.666l1.725-2.977zm13.36 0l-5.193 1.666l1.724 2.977l5.192-1.666zm-6.375-2.342a1 1 0 0 0-.49-.03l-.12.03L8.13 6.292L12 7.533l3.87-1.241z'/%3E%3C/g%3E%3C/svg%3E");
}

button {
  background-color: #4585FE;
  color: #FFFFFF;
  border: 1px solid #000000;
  width: auto;
  height: 2em;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  margin-right: 10px;
}

button:hover {
  background-color: #ABCDEF;
}

button:active {
  transform: translateY(1px);
}
</style>
